<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>The Ajax 01 Page</h1>
<div>
    <fieldset>
        <legend>Ajax 异步请求</legend>
        <button onclick="doAjacGet()">Ajax Get Request</button>
        <span id="resultId">Loding data......</span>
    </fieldset>
</div>
<script>
    function doAjacGet(){
        // debugger;
        //1.创建对象
        var xhr = new XMLHttpRequest();
        //2.设置状态监听
        xhr.onreadystatechange=function(){
            if(xhr.readyState==4&&xhr.status==200){
                var result = xhr.responseText; //获取服务端响应的文本数据
                document.getElementById("resultId").innerHTML=result;
            }
        }
        //3.建立与服务器连接
        xhr.open("GET","http://localhost/doAjaxGet",true);
        //4.发送请求
        xhr.send(null);

        console.log("do other...");  //这句话是运行在主线程
    }

</script>
</body>

</html>